/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */

import BreadCrumbCom from "@/components/BreadCrumbCom";
import '@/styles/schedulingPolicyConfiguration.less'
import { QuestionCircleOutlined } from "@ant-design/icons";
import { Radio, Switch, message } from "antd";
import { Link } from "inula-router";
import {
  getNumaAffinitySchedulingStatus,
  updateNumaAffinitySchedulingStatus,
  getBinpackSchedulingStatus,
  updateBinpackSchedulingStatus,
  getFairSchedulingStatus,
  updateFairSchedulingStatus,
  getGroupSchedulingStatus,
  updateGroupSchedulingStatus,
  getPrioritySchedulingStatus,
  updatePrioritySchedulingStatus,
} from "@/api/schedulingApi";
import { useEffect, useState } from "openinula";
import noData from '@/assets/images/noData.png';
import { volcano, gang, binPack, priority, drf, descVolcano } from '@/assets/md'
import PriorityPreemption from "./PriorityPreemption";

export default function SchedulingPolicyConfiguration() {
  const [numaAffinitySchedulingStatus, setNumaAffinitySchedulingStatus] = useState(false);
  const [numaAffinityLoading, setNumaAffinityLoading] = useState(false);
  const [binpackSchedulingStatus, setBinpackSchedulingStatus] = useState(false);
  const [binpackLoading, setBinpackLoading] = useState(false);

  const [fairSchedulingStatus, setFairSchedulingStatus] = useState(false);
  const [fairLoading, setFairLoading] = useState(false);

  const [groupSchedulingStatus, setGroupSchedulingStatus] = useState(false);
  const [groupLoading, setGroupLoading] = useState(false);

  const [prioritySchedulingStatus, setPrioritySchedulingStatus] = useState(false);
  const [priorityLoading, setPriorityLoading] = useState(false);
  const [selectedScheduler, setSelectedScheduler] = useState('volcano');

  const [explanatoryPanelOpen, setExplanatoryPanel] = useState(false);

  const [explanatoryInfo, setExplanatoryInfo] = useState(volcano);

  const handleChangeNumaAffinitySchedulingStatus = async (checked) => {
    setNumaAffinityLoading(true);
    try {
      await updateNumaAffinitySchedulingStatus({ policy: checked ? 'open' : 'close' })
      getNumaAffinitySchedulingStatusInfo();
      setNumaAffinityLoading(false);
    } catch (error) {
      if (error.response.status === 403) {
        message.error('操作失败，当前用户没有操作权限，请联系管理员添加权限!');
      } else {
        message.error(error.data.message);
      }
      setNumaAffinityLoading(false);
    };
  };

  const getNumaAffinitySchedulingStatusInfo = async () => {
    const res = await getNumaAffinitySchedulingStatus()
    setNumaAffinitySchedulingStatus(res.data.data === 'open')
  }

  const handleChangeBinpackSchedulingStatus = async (checked) => {
    setBinpackLoading(true);
    try {
      await updateBinpackSchedulingStatus({ policy: checked ? 'open' : 'close' })
      getBinpackSchedulingStatusInfo();
      setBinpackLoading(false);
    } catch (error) {
      if (error.response.status === 403) {
        message.error('操作失败，当前用户没有操作权限，请联系管理员添加权限!');
      } else {
        message.error(error.response?.data.message);
      };
      setBinpackLoading(false);
    };
  };

  const getBinpackSchedulingStatusInfo = async () => {
    const res = await getBinpackSchedulingStatus()
    setBinpackSchedulingStatus(res.data.data === 'open')
  }

  const handleFairSchedulingStatus = async (checked) => {
    setFairLoading(true);
    try {
      await updateFairSchedulingStatus({ policy: checked ? 'open' : 'close' })
      getFairSchedulingStatusInfo();
      setBinpackLoading(false);
    } catch (error) {
      if (error.response.status === 403) {
        message.error('操作失败，当前用户没有操作权限，请联系管理员添加权限!');
      } else {
        message.error(error.response?.data.message);
      };
      setFairLoading(false);
    };
  };

  const getFairSchedulingStatusInfo = async () => {
    const res = await getFairSchedulingStatus()
    setFairSchedulingStatus(res.data.data === 'open')
  }

  const handleGroupSchedulingStatus = async (checked) => {
    setGroupLoading(true);
    try {
      await updateGroupSchedulingStatus({ policy: checked ? 'open' : 'close' })
      getGroupSchedulingStatusInfo();
      setGroupLoading(false);
    } catch (error) {
      if (error.response.status === 403) {
        message.error('操作失败，当前用户没有操作权限，请联系管理员添加权限!');
      } else {
        message.error(error.response?.data.message);
      };
      setGroupLoading(false);
    };
  };

  const getGroupSchedulingStatusInfo = async () => {
    const res = await getGroupSchedulingStatus();
    setGroupSchedulingStatus(res.data.data === 'open')
  }

  const handlePrioritySchedulingStatus = async (checked) => {
    setPriorityLoading(true);
    try {
      await updatePrioritySchedulingStatus({ policy: checked ? 'open' : 'close' })
      getPrioritySchedulingStatusInfo();
      setPriorityLoading(false);
    } catch (error) {
      if (error.response.status === 403) {
        message.error('操作失败，当前用户没有操作权限，请联系管理员添加权限!');
      } else {
        message.error(error.response?.data.message);
      };
      setPriorityLoading(false);
    };
  };

  const getPrioritySchedulingStatusInfo = async () => {
    const res = await getPrioritySchedulingStatus();
    setPrioritySchedulingStatus(res.data.data === 'open')
  }

  const handleSchedulerChange = (e) => {
    setSelectedScheduler(e.target.value);
  };

  const handleClosePriorityPreemption = () => {
    setExplanatoryPanel(false);
  };

  const handleNumaAwareOpen = () => {
    setExplanatoryInfo(volcano);
    setExplanatoryPanel(true);
  };

  const handleBinPack = () => {
    setExplanatoryInfo(binPack);
    setExplanatoryPanel(true);
  };

  const handleDescAbout = () => {
    setExplanatoryInfo(descVolcano);
    setExplanatoryPanel(true);
  };

  const handleDrfOpen = () => {
    setExplanatoryInfo(drf);
    setExplanatoryPanel(true);
  };

  const handleGangOpen = () => {
    setExplanatoryInfo(gang);
    setExplanatoryPanel(true);
  };

  const handlePriorityOpen = () => {
    setExplanatoryInfo(priority);
    setExplanatoryPanel(true);
  };

  const goToCustome = () => {
    window.location.href = '/container_platform/platformManage/customResourceDefinition';
  };

  useEffect(() => {
    getNumaAffinitySchedulingStatusInfo();
    getBinpackSchedulingStatusInfo();
    getFairSchedulingStatusInfo();
    getGroupSchedulingStatusInfo();
    getPrioritySchedulingStatusInfo();
  }, [])
  return (
    <div className="scheduling_policy_container">
      <BreadCrumbCom items={[
        { title: 'NUMA亲和调度', disabled: true },
        { title: '调度策略配置', disabled: true },
      ]} />
      <div className="default_scheduling">
        <div className="schedule_title mb_12">调度器</div>
        <Radio.Group buttonStyle="solid" defaultValue="volcano" style={{ marginBottom: '32px' }} onChange={handleSchedulerChange} >
          <Radio.Button value="volcano" className="radio_schedule">volcano</Radio.Button>
        </Radio.Group>
        {selectedScheduler === 'volcano' &&
          (
            <div className='custom-switch'>
              <div className="schedule_description">Volcano是一个面向高性能计算（HPC）、人工智能（AI）和大数据等工作负载的Kubernetes扩展调度器。启用volcano调度器时需要设置配置文件，详见右侧帮助按钮
                <QuestionCircleOutlined onClick={handleDescAbout} className='question-icon-hover' style={{ marginLeft: '7px' }} />
              </div>
              <div className="schedule_title mb_12">NUMA亲和性调度<QuestionCircleOutlined onClick={handleNumaAwareOpen} className='question-icon-hover' /></div>
              <Switch onChange={handleChangeNumaAffinitySchedulingStatus} loading={numaAffinityLoading} checked={numaAffinitySchedulingStatus} className="mb_12" />
              <div className="schedule_description">启动后， 优化多核内存的访问记录，减少内存访问的延迟</div>
              <div className="schedule_title mb_12">Binpack调度<QuestionCircleOutlined onClick={handleBinPack} className='question-icon-hover' /></div>
              <Switch checked={binpackSchedulingStatus} onChange={handleChangeBinpackSchedulingStatus} LOADING={binpackLoading} className="mb_12" />
              <div className="schedule_description">启动该能力后，调度器优先选择具有最多资源请求的节点，减少各节点资源碎片，提高集群资源利用率</div>
              <div className="schedule_title mb_12">公平调度<QuestionCircleOutlined onClick={handleDrfOpen} className='question-icon-hover' /></div>
              <Switch onChange={handleFairSchedulingStatus} checked={fairSchedulingStatus} LOADING={fairLoading} className="mb_12" />
              <div className="schedule_description">启动后，可增强集群业务的吞吐量，提交业务运行性能</div>
              <div className="schedule_title mb_12">组调度<QuestionCircleOutlined onClick={handleGangOpen} className='question-icon-hover' /></div>
              <Switch checked={groupSchedulingStatus} loading={groupLoading} onChange={handleGroupSchedulingStatus} className="mb_12" />
              <div className="schedule_description">启动后，可增强集群业务的吞吐量，提交业务运行性能。</div>
              <div className="schedule_title mb_12">优先级抢占<QuestionCircleOutlined onClick={handlePriorityOpen} className='question-icon-hover' /></div>
              <Switch checked={prioritySchedulingStatus} loading={priorityLoading} onChange={handlePrioritySchedulingStatus} className="mb_12" />
              <div className="schedule_description">启动后，集群资源不足时，调度器主动驱逐低优先级业务，保障高优先级业务正常调度。<span className="check_title"><Link to='/SchedulingPolicyConfiguration/priorityClass'>查看优先级队列 &gt;</Link></span></div>
            </div>
          )}
      </div>
      {selectedScheduler === 'scheduler' && <div className="default_scheduling_no_data">
        <div>
          <img src={noData} style={{ marginBottom: '26px' }} />
          <div style={{ textAlign: 'center', color: '#89939b' }}>kube scheduler 无可配置调度策略<br />切换默认调度器可修改调度策略</div>
        </div>
      </div>}
      {selectedScheduler === 'volcano' && explanatoryPanelOpen && <PriorityPreemption onClose={handleClosePriorityPreemption} data={explanatoryInfo} />}
    </div>
  )
}